<template>
  <div id="bdy">
    <div class="tbody">
      <!--步骤说明-->
      <el-steps :active="active" finish-status="success">
        <!--将流程封装成数组，v-for循环-->
        <el-step v-for="flow in exception_flows" :title="flow"></el-step>
        <!--<el-step title="选取数据"></el-step>-->
        <!--<el-step title="选取算法"></el-step>-->
        <!--<el-step title="设置参数"></el-step>-->
        <!--<el-step title="结果展示"></el-step>-->
      </el-steps>

      <el-form ref="form" :model="form"  label-width="80px">
        <!--选取数据-->
        <div class="info" v-if="active==1">
          <!--获取数据-->
          <br/>
          <br/>
          <el-button type="primary" @click="checkData">获取数据</el-button>
        </div>

        <!--选取算法-->
        <div class="info" v-if="active==2">
          <el-form-item label="算法:" >
              <br>
             <el-radio-group v-model="form.algorithm">
               <!--algorithm绑定了label值，从0开始-->
               <el-radio v-for="(item, i) in exception_algorithms" :label="i">{{item}}</el-radio>
             </el-radio-group >
          </el-form-item>
        </div>

        <!--设置所选取算法的对应参数,每种算法的参数对应一个form表单-->
        <!--form.algorithm为0表示设置标准差算法参数-->
        <div class="info" v-if="active==3" v-show="form.algorithm == 0">
          <el-form ref="standardValue_parameters" :model="form.standardValue_parameters" >
            <el-select v-model="form.standardValue_parameters.threshold" placeholder="请选择阈值(n倍标准差)">
              <el-option
                v-for="item in standardValue_threshold"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="form.standardValue_parameters.base" placeholder="请选择基准">
              <el-option
                v-for="item in standardValue_base"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form>
        </div>

        <!--form.algorithm为1表示设置差分算法参数-->
        <div class="info" v-if="active==3" v-show="form.algorithm == 1">
          <el-form ref="standardValue_parameters" :model="form.difference_parameters" >
           <el-select v-model="form.difference_parameters.threshold" placeholder="请选择阈值(n倍平均值)">
              <el-option
                v-for="item in difference_threshold"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

           <el-select v-model="form.difference_parameters.base" placeholder="请选择基准">
              <el-option
                v-for="item in difference_base"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form>
          <br/>
          <!--要加上校验，输入只能是数字-->
          <!--<el-input v-model="form.difference_parameters.steps" placeholder="请输入步长(输入数字即可)" clearable style="width: 50%"></el-input>-->
          <!--<br>-->
           <span class="demonstration">请设置步长: </span><el-input-number v-model="form.difference_parameters.steps" :step="2" placeholder="请设置步长" style="width: 50%"></el-input-number>
        </div>

        <!--form.algorithm为2表示设置CNN算法参数-->
        <div class="info" v-if="active==3" v-show="form.algorithm == 2">
            <el-form ref="standardValue_parameters" :model="form.difference_parameters" >
           <el-select v-model="form.difference_parameters.threshold" placeholder="请选择阈值(n倍平均值)">
              <el-option
                v-for="item in difference_threshold"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

           <el-select v-model="form.difference_parameters.base" placeholder="请选择基准">
              <el-option
                v-for="item in difference_base"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form>
          <br/>
          <!--要加上校验，输入只能是数字-->
          <el-input v-model="form.difference_parameters.steps" placeholder="请输入步长(输入数字即可)" clearable style="width: 50%"></el-input>
        </div>

        <!--展示数据-->
        <div class="info" v-if="active==4">
          <el-form-item label="数据一" prop="number">
            <el-input type="text" v-model="form.number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数据二" prop="time">
            <el-input type="text" v-model="form.time" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数据三" prop="instroduce">
            <el-input type="text" v-model="form.instroduce" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">输出数据</el-button>
          </el-form-item>
        </div>
      </el-form>

      <!--获取百度地图的窗口-->
      <!--<div>-->
        <!--&lt;!&ndash;编辑窗口  :visible.sync="dialogVisible" 默认设置页面为影藏状态false                    news   &ndash;&gt;-->
        <!--<el-dialog :visible.sync="dialogVisible"  width="80%" >-->
          <!--&lt;!&ndash;<el-form ref="Form" :model="user" label-width="80px" label-position="right" :rules="rule1">&ndash;&gt;-->
            <!--&lt;!&ndash;<el-form-item label="姓名" prop="name">&ndash;&gt;-->
              <!--&lt;!&ndash;<el-input v-model="user.name" placeholder="姓名" />&ndash;&gt;-->
            <!--&lt;!&ndash;</el-form-item>&ndash;&gt;-->
            <!--&lt;!&ndash;<el-form-item label="账户" prop="username">&ndash;&gt;-->
              <!--&lt;!&ndash;<el-input v-model="user.username" placeholder="账户" />&ndash;&gt;-->
            <!--&lt;!&ndash;</el-form-item>&ndash;&gt;-->
            <!--&lt;!&ndash;<el-form-item label="所属部门" prop="dept">&ndash;&gt;-->
              <!--&lt;!&ndash;<treeselect v-model="user.dept" :multiple="false" :options="orgData" placeholder="所属部门"/>&ndash;&gt;-->
            <!--&lt;!&ndash;</el-form-item>&ndash;&gt;-->
            <!--&lt;!&ndash;<el-form-item label="角色" prop="roles">&ndash;&gt;-->
              <!--&lt;!&ndash;<el-select v-model="user.roles" multiple placeholder="请选择" style="width:100%">&ndash;&gt;-->
                <!--&lt;!&ndash;<el-option&ndash;&gt;-->
                  <!--&lt;!&ndash;v-for="item in roles"&ndash;&gt;-->
                  <!--&lt;!&ndash;:key="item.value"&ndash;&gt;-->
                  <!--&lt;!&ndash;:label="item.label"&ndash;&gt;-->
                  <!--&lt;!&ndash;:value="item.value"&ndash;&gt;-->
                <!--&lt;!&ndash;/>&ndash;&gt;-->
              <!--&lt;!&ndash;</el-select>&ndash;&gt;-->
            <!--&lt;!&ndash;</el-form-item>&ndash;&gt;-->
            <!--&lt;!&ndash;<el-form-item label="头像" prop="dept">&ndash;&gt;-->
              <!--&lt;!&ndash;<el-upload&ndash;&gt;-->
                <!--&lt;!&ndash;class="avatar-uploader"&ndash;&gt;-->
                <!--&lt;!&ndash;:action="upUrl"&ndash;&gt;-->
                <!--&lt;!&ndash;accept="image/jpeg, image/gif, image/png, image/bmp"&ndash;&gt;-->
                <!--&lt;!&ndash;:show-file-list="false"&ndash;&gt;-->
                <!--&lt;!&ndash;:on-success="handleAvatarSuccess"&ndash;&gt;-->
                <!--&lt;!&ndash;:before-upload="beforeAvatarUpload"&ndash;&gt;-->
                <!--&lt;!&ndash;:headers="upHeaders"&ndash;&gt;-->
              <!--&lt;!&ndash;&gt;&ndash;&gt;-->
                <!--&lt;!&ndash;<img v-if="user.avatar" :src="user.avatar" class="avatar" />&ndash;&gt;-->
                <!--&lt;!&ndash;<i v-else class="el-icon-plus avatar-uploader-icon" />&ndash;&gt;-->
              <!--&lt;!&ndash;</el-upload>&ndash;&gt;-->
            <!--&lt;!&ndash;</el-form-item>&ndash;&gt;-->
          <!--&lt;!&ndash;</el-form>&ndash;&gt;-->
          <!--<div style="text-align:right;">-->
            <!--<el-button type="danger" @click="dialogVisible=false">取消</el-button>-->
            <!--<el-button type="primary" @click="confirm('Form')">确认</el-button>-->
          <!--</div>-->
        <!--</el-dialog>-->
      <!--</div>-->

      <!--上一步，下一步-->
      <div>
        <el-button style="margin-top: 12px;" @click="pre" v-if="active>1">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="next" v-if="active<4">下一步</el-button>
      </div>

    </div>
  </div>
</template>

<style scoped>
.tbody{
    width:80%;
    margin-left:10%;
    margin-top: 2%;
}
/* 表单 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
//表单js代码
 const cityOptions = [];
 const defaultUser = {
    id: "",
    name: "",
    username: "",
    dept: null,
    avatar: "/media/default/avatar.png"
  };
  export  default{
    name: "exception",
    data() {
      return {
        active: 1,
        exception_flows:["选取数据", "选取算法", "设置参数", "结果展示"],                      //流程
        exception_algorithms:["标准差算法", "差分算法", "CNN算法", "svm"],   //算法

        //标准差算法阈值，标准差倍数
        standardValue_threshold: [{
          value: '1',
          label: '1倍标准差'
          }, {
            value: '2',
            label: '2倍标准差'
          }, {
            value: '3',
            label: '3倍标准差'
          },{
            value: '4',
            label: '4倍标准差'
          },{
            value: '5',
            label: '5倍标准差'
        }],

        //标准差算法基准
        standardValue_base: [{
          value: 'standardValue_current',
          label: '当前标准差'
          }, {
            value: 'standardValue_history',
            label: '历史标准差'
          }],

        //差分算法阈值，平均值倍数
        difference_threshold: [{
          value: '1',
          label: '1倍平均值'
          }, {
            value: '2',
            label: '2倍平均值'
          }, {
            value: '3',
            label: '3倍平均值'
          },{
            value: '4',
            label: '4倍平均值'
        },{
            value: '5',
            label: '5倍平均值'
        }],

        //差分算法基准
        difference_base: [{
          value: 'difference_current',
          label: '当前平均值'
          }, {
            value: 'difference_history',
            label: '历史平均值'
          }],

        //参数表单
        form: {
          earthquake_data:[],                             //返回地震数据
          standardValue_parameters:{                      //标准差算法参数列表
           threshold :null,                              //阈值
           base :null,                                   //基准
         },
          difference_parameters:{                         //差分算法参数列表
           threshold :null,                              //阈值
           steps :null,                                   //步长
           base :null,                                   //基准
         },
          CNN_parameters:{},                              //神经网络算法参数列表
          checkAll: false,
          cities: cityOptions,
          isIndeterminate: true,
          radio1: 0,
          radio2: 0,
          radio3: 0,
          imageUrl: '',
          username : '',
          tell: '',
          indentity: '',
          number:'',
          instroduce:'',
          time:'',
          algorithm:0,
        },

        user: defaultUser,
        // dialogVisible: false,
      }
    },
    methods: {
      onSubmit() {
          //this.form.checkedCities获取多选框的内容   zxs[this.form.radio]  this.form.imageUrl
       //开始提交 在这里进行跨域请求
          this.axios({
            method: "post",
            url: "/api/PsychoSys/tuser.action",
            data: Qs.stringify(this.form)
          })
            .then(res => {
               this.$router.push("/tinfo");
            })
            .catch(function(err) {
              console.log(err);
            });
          /*在这里进行跨域请求*/
        //开始提交
      },

      checkData() {
        //this.form.checkedCities获取多选框的内容   zxs[this.form.radio]  this.form.imageUrl
        //开始提交 在这里进行跨域请求

        this.$router.push("/dataAnalysis/getEarthData")
        // this.user = Object.assign({}, defaultUser);
        // this.$route()
        // this.dialogVisible = true;
        // // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
        // // 回调的 this 自动绑定到调用它的实例上。
        // this.$nextTick(() => {
        //   // this.$refs["Form"].clearValidate();
        // });
      },

      next() {
        if (this.active++ > 3) this.active = 1;
        // console.log("algorithm:"+this.form.algorithm)
        // console.log(typeof (this.form.algorithm))

        // if (this.active == 2){             //每次回到选择算法的步骤，就会清空之前所有的参数列表
        //   console.log("algorithm:"+this.form.algorithm);
        //   // this.form.standardValue_parameters ={};
        //   // this.form.difference_parameters ={};
        //   // console.log("standardValue2:"+this.standardValue2);
        // }
        if (this.active == 3){
          console.log("algorithm:"+this.form.algorithm);
          // console.log("standardValue2:"+this.standardValue2);
        }

        if (this.active == 4){
          console.log("threshold:"+this.form.standardValue_parameters.threshold);
          console.log("base:"+this.form.standardValue_parameters.base);

          console.log("threshold:"+this.form.difference_parameters.threshold);
          console.log("base:"+this.form.difference_parameters.base);
          console.log("steps:"+this.form.difference_parameters.steps);
        }
      },
      pre() {
        if (this.active-- < 2) this.active = 1;
      }

    }
  }
//表单js代码
</script>



